{extend name="df/tpl/base" /}

{block name="area_body"}
<fieldset class="layui-elem-field">
  <legend>CMS类目管理</legend>
  <div class="layui-field-box">
    {:html_head_tip('最多3级类目,点击带 .列单元格编辑')}
    <div class="block clearfix">
      <div class="layui-btn-group">
        <a href="{:url(CONTROLLER_NAME.'/set',['parent'=>$parent])}" class="layui-btn"> <i class="layui-icon layui-icon-add-1"></i>添加</a>
        <a data-href="{:url(CONTROLLER_NAME.'/dels',['check'=>1])}" data-table="demo" class="layui-btn layui-btn-danger js-ops confirm"><i class="layui-icon layui-icon-delete"></i>批量删除</a>
      </div>
      {gt name="parent" value="0"}
      <a href="{:url(CONTROLLER_NAME.'/index',['parent'=>$parent,'up'=>1])}" class="layui-btn layui-btn-primary" id="js-return"><i class="fa fa-reply"></i> 返回</a>
      {/gt}
      <a href="{:url(CONTROLLER_NAME.'/drag')}" class="layui-btn fr  layui-btn-primary"><i class="fa fa-superpowers"></i> 高级模式</a>
    </div>
    <table id="demo" lay-filter="fDemo"></table>
  </div>
</fieldset>
<!-- script -->
<script>
var parent = parseInt({$parent|default=0});
// page init
layui.use(['rb','table2','element','form'], function(){
  var layer = layui.layer
  ,table = layui.table2
  ,form = layui.form
  ,rb = layui.rb
  ,$ = layui.$;
  rb.log('page','init');
  //执行渲染
  table.render({ elem: '#demo'
    ,url: '{:url(CONTROLLER_NAME."/ajax")}'
    ,where: { parent : parent }
    ,method: 'get'
    ,initSort: {
      field: 'sort',type: 'desc'
    }
    ,request: { pageName: 'page',limitName: 'size' }
    ,limits: [10,30]
    ,limit: 10
    ,loading: true
    ,page: true
    ,cols:  [[
      {checkbox: true} //,fixed: 'left',LAY_CHECKED: true
      ,{field: 'id', title: 'ID', width: 80,event: 'go',templet:'#urlTpl', style:'cursor: pointer;',sort:true}//,fixed: 'left'
      ,{field: 'name', title: '菜单 .', width: 150,edit: 'text'}
      ,{field: 'icon', title: '图标 .', width: 150,edit: 'text',templet: '#iconTpl'}
      ,{field: 'url', title: '链接 .', width: 150,edit: 'text'}
      ,{field: 'show', title: '显示', width: 80,templet:'#showTpl'}
      ,{field: 'sort',title: '排序 .',width:80,edit: 'text',sort:true}
      ,{align:'left',title: '操作',width:200,toolbar: '#barDemo'} //,fixed: 'right'
    ]]
    ,done: function(res, page, count){
      // 转换数据
      //异步 res为接口返回,直接赋值 res为：{data: [], count: 99}
      // console.log(res);
      // res.data[0].username = 'done-edit';
      // console.log(page,count);
      // res.count = 100;
    }
  });

  // 单元格编辑
  table.on('edit(fDemo)', function(obj){
    // console.log(obj); // value , field ,data
    $.post('{:url(CONTROLLER_NAME."/editOne")}', { field: obj.field,val: obj.value,id:obj.data.id }, function(data){
      rb.ajaxTip(data);
    });
  });
    // 单元格自定义编辑
  table.on('tool(fDemo)', function(obj){
    // console.log(obj);
    var data = obj.data;
    if(obj.event === 'go'){
      rb.goTo(obj.tr.find('a').attr('href'));
    }
  });
  // 单元格排序
  table.on('sort(fDemo)', function(obj){
    tb2.reload({
      initSort: obj
      ,where: {
        field: obj.field
        ,order: obj.type
        ,parent: parent
      }
    });
  });
  // 单选
  form.on('switch', function(data){
    // console.log(data); //elem elem.checked value othis
    var el = data.elem;
    var id = parseInt(el.getAttribute('data-id'));
    rb.post(el,'{:url(CONTROLLER_NAME."/editOne")}',{ field: 'hide',val: el.checked ? 1:0,id:id },true);
  });
});
</script>
<script type="text/html" id="iconTpl">
  <i class="{{ d.icon }}"></i>
</script>
<script type="text/html" id="urlTpl">
  <a href="{:url(CONTROLLER_NAME.'/index',[],'')}?parent={{ d.id }}" class="layui-table-link">{{ d.id }}</a>
</script>
<script type="text/html" id="showTpl">
  <form class="layui-form">
  <input type="checkbox" data-id="{{ d.id }}"
  {{# if(d.show){ }} checked  {{#  } }}
  lay-skin="switch">
  </form>
</script>
<script type="text/html" id="barDemo">
<div class="layui-btn-group">
  <a href="{:url(CONTROLLER_NAME.'/set',[],'')}?id={{ d.id }}" class="layui-btn layui-btn-sm"> <i class="layui-icon layui-icon-edit"></i>编辑</a>
  <a href="{:url(CONTROLLER_NAME.'/del',['check'=>1],'')}?id={{ d.id }}" class="layui-btn layui-btn-sm layui-btn-danger ajax-get confirm no-alert"><i class="layui-icon layui-icon-delete"></i>删除</a>
</div>
</script>
{/block}
